<template>
    <div class="mapContainer">
        <mapContainer @mapReady="ready" />
        <div class="confirm-box">
            <div class="title">当前位置</div>
            <div class="info-wrap">
                <div class="left-box">
                    <img :src="point" alt=""> 万顺私宴
                </div>
                <div class="right-box">
                    {{ isArrive ? '在范围内' : '不在范围内' }}
                </div>
            </div>
            <div class="confirm-btn">确定</div>
        </div>
    </div>
</template>

<script setup>
import mapContainer from "@/components/map/mapContainer.vue"
import { nextTick, ref } from "vue"
import daka from "@/assets/images/daka.png"
import arrived from "@/assets/images/arrived.png"
import unarrived from "@/assets/images/unarrived.png"
import point from "@/assets/images/point.png"
let mapIns = null

const isArrive = ref(true)
//解析定位结果
const ready = (map) => {
    mapIns = map
    map.on('complete', () => {
        AMap.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：5s
                position: 'RB',    //定位按钮的停靠位置
                offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
                zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
            });
            // map.addControl(geolocation);
            geolocation.getCurrentPosition(function (status, result) {
                if (status == 'complete') {
                    onComplete(result)
                } else {
                    onError(result)
                }
            });
        });

    })
}


function onComplete(data) {
    const { lat, lng } = data.position
    addCircle([lng, lat])
    // addCurrentPoint(map, [lng, lat])

}

//解析定位错误信息
function onError(data) {
    alert('定位失败')

}
let circle = null
// 画出打开范围的圈圈
function addCircle(center) {
    circle = new AMap.Circle({
        center,  // 圆心位置，默认经纬度，可通过用户当前位置经纬度填充
        radius: 100, // 圆半径，单位:米
        fillColor: '#a4d5ff',   // 圆形填充颜色
        strokeColor: '#59b0fb', // 描边颜色
        strokeWeight: 2, // 描边宽度
    });
    mapIns.add(circle)
    mapIns.setFitView([circle])
    nextTick(() => {
        addCurrentPoint(center)
    })
}
let currentMarker = null
function addCurrentPoint(position) {
    // currentMarker = new AMap.Marker({
    //     map: mapIns,
    //     position,
    //     icon: new AMap.Icon({
    //         size: [30, 35],
    //         image: daka,
    //         imageSize: [30, 35]
    //     }),
    //     label: {
    //         direction: 'top',
    //         content: labelContent,
    //         offset: labelOffset,
    //     },
    //     // 这个一定要添加，方式缩放的时候点位偏移，x表示图片宽度的一半 y表示图片的高，整体取负值
    //     offset: new AMap.Pixel(-15, -17)
    //     // 114.125181.22.607298
    // });
    // const point = currentMarker.getPosition()
    setTimeout(() => {
        let flag = circle.contains(position)
        let labelContent = null
        if (flag) {
            labelContent = `
                <div class="labelBg">
                <img src="${arrived}" /> <span>你已进入打卡区域 </span>
                </div>
            `
            isArrive.value = true
        } else {
            labelContent = `
                <div class="unlabelBg">
                <img src="${unarrived}" /> <span>你未进入打卡区域 </span>
                </div>
            `
            isArrive.value = false
        }
        currentMarker = new AMap.Marker({
            map: mapIns,
            position,
            icon: new AMap.Icon({
                size: [30, 35],
                image: daka,
                imageSize: [30, 35]
            }),
            label: {
                direction: 'top',
                content: labelContent,
                offset: new AMap.Pixel(0, -5),
            },
            // 这个一定要添加，方式缩放的时候点位偏移，x表示图片宽度的一半 y表示图片的高，整体取负值
            offset: new AMap.Pixel(-15, -17)
            // 114.125181.22.607298
        });
        // const point = currentMarker.getPosition()
        console.log("🚀 ~ addCurrentPoint ~ circle.contains(position):", circle.contains(position))
    }, 2000)

}

</script>
<style>
.amap-marker-label {
    border: unset;
    background-color: unset;
    padding: unset;
    font-size: unset;
    line-height: unset;
}

.labelBg {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    box-sizing: border-box;
    height: 60px;
    font-size: 24px;
    color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    background: rgba(0, 160, 252, 1);
}


.labelBg img {
    width: 30px;
    height: 30px;
    margin: -2px 4px 0 0;
}

.unlabelBg {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    box-sizing: border-box;
    height: 60px;
    font-size: 24px;
    color: #d81e06;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
}

.unlabelBg img {
    width: 30px;
    height: 30px;
    margin: -2px 4px 0 0;
}
</style>
<style lang="scss" scoped>
.mapContainer {
    position: relative;
    height: calc(100vh - 92px - 88px);
    width: 100vw;

    .confirm-box {
        position: absolute;
        width: 100vw;
        padding: 30px 34px;
        box-sizing: border-box;
        z-index: 9999;
        bottom: 0;
        background: rgba(255, 255, 255, 1);

        .title {
            font-size: 24px;
            color: rgba(128, 128, 128, 1);
        }

        .info-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0 40px 0;

            .left-box {
                display: flex;
                align-items: center;
                /** 文本1 */
                font-size: 28px;
                color: rgba(51, 51, 51, 1);

                img {

                    width: 23.25px;
                    height: 31px;
                    margin-right: 20px;

                }
            }

            .right-box {
                font-size: 24px;
                color: rgba(111, 129, 135, 1);
            }


        }

        .confirm-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28px;
            color: rgba(255, 255, 255, 1);
            width: 690px;
            height: 90px;
            border-radius: 50px;
            background: linear-gradient(160.78deg, rgba(0, 160, 252, 1) 0%, rgba(8, 173, 255, 1) 100%);
        }
    }
}
</style>